
<template>
  <div class="form-design-setting-container">
    <el-form size="" label-width="130px" label-position="left">
      <el-tabs v-model="tabs1">
        <el-tab-pane label="题目设置" name="1">
          <el-form-item label="是否必填" label-width="100px">
            <el-checkbox v-model="formComponent.require" label="必填" />
          </el-form-item>
          <el-form-item label="宽度设置" label-width="100px">
            <el-select v-model="formComponent.width" placeholder="请选择">
              <el-option v-for="item in designOptions.widthOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="tabs2">
        <el-tab-pane label="图片设置" name="1">
          <el-form-item label="单张图片大小限制">
            <el-select v-model="formComponent.imgSize">
                <el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="图片数量限制">
            <el-select v-model="formComponent.limit">
                <el-option v-for="item in limiitOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
import { designOptions } from "@/views/form/manage/design/config/formCmpConfig.js";

const props = defineProps({
  formComponent: {
    type: Object,
  },
})
const formComponent = computed(() => { return props.formComponent })
const tabs1 = ref('1')
const tabs2 = ref('1')
const sizeOptions = ref([
  { label: '3M', value: 3 },
  { label: '5M', value: 5 },
  { label: '7M', value: 7 },
  { label: '10M', value: 10 }
]);
const limiitOptions = ref([
  { label: '1张', value: 1 },
  { label: '2张', value: 2 },
  { label: '3张', value: 3 },
  { label: '5张', value: 5 },
  { label: '8张', value: 8 },
]);
</script>

<style lang="scss" scoped>
.el-select{
    width: 100%;
}
// ::v-deep .el-form-item__content{
//     justify-content: end;
// }
// ::v-deep .el-form-item__label{
//     width: 150px;
// }
</style>
